---
import DefaultLayout from '../../layouts/DefaultLayout.astro'
import { Breadcrumbs, BreadcrumbsItem } from 'accessible-astro-components'

export async function getStaticPaths() {
  const data = await fetch('https://jsonplaceholder.typicode.com/posts').then((response) => response.json())

  return data.map((post) => {
    return {
      params: { post: post.title.replaceAll(' ', '-').toLowerCase() },
      props: { post },
    }
  })
}

const { post } = Astro.props
---

<DefaultLayout title={post.title} description={post.body} url={post.title}>
  <div class="container">
    <div class="mt-12">
      <Breadcrumbs>
        <BreadcrumbsItem href="/" label="Home" />
        <BreadcrumbsItem href="/blog" label="Blog" />
        <BreadcrumbsItem currentPage={true} label={post.title} />
      </Breadcrumbs>
    </div>
  </div>
  <section class="my-12">
    <div class="container">
      <h1>{post.title}</h1><br />
      <p>By userId: {post.userId}</p>
    </div>
  </section>
  <section class="my-12">
    <div class="container">
      <p class="text-2xl">{post.body}</p>
    </div>
  </section>
</DefaultLayout>

<style lang="scss">
  ul {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 4rem;

    @media (min-width: 550px) {
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 2rem;
    }

    @media (min-width: 950px) {
      grid-template-columns: repeat(3, 1fr);
    }
  }
</style>
